<script setup lang="ts">


import Props from "@/components/Props.vue";
import Card from "@/components/Card.vue";
import ReactProps from "@/components/ReactProps.vue";
import {type Ref, ref} from "vue";
import PropsValidate from "@/components/PropsValidate.vue";

const text: Ref<string> = ref('')
</script>

<template>
  <card title="组件属性--定义方式">
    <p>在组件内通过框架内置的defineProps()方法定义属性，从而达到组件传参的效果</p>
    <props title="组件属性实例"/>
  </card>
  <card title="响应式Props解构">
    <input type="text" v-model="text">
    <react-props :title="text"/>
  </card>
  <card title="Prop 校验">
    <props-validate :num="16" :age="'28 years old'" email="" msg="success" />
  </card>
</template>

<style scoped>

</style>